<template>
  <div class="sales-analytics">
    <div class="page-header">
      <h1>销售分析</h1>
      <div class="filter-controls">
        <div class="filter-buttons">
          <button class="filter-btn active">今日</button>
          <button class="filter-btn">本周</button>
          <button class="filter-btn">本月</button>
          <button class="filter-btn">本季度</button>
          <button class="filter-btn">本年</button>
        </div>
        <div class="custom-date">
          <input type="date" class="date-input">
          <span class="date-separator">至</span>
          <input type="date" class="date-input">
          <button class="apply-btn">应用</button>
        </div>
      </div>
    </div>
    
    <div class="overview-cards">
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-shopping-cart"></i>
        </div>
        <div class="stat-content">
          <div class="stat-title">销售总额</div>
          <div class="stat-value">¥{{ salesData.totalSales.toLocaleString() }}</div>
          <div class="stat-change" :class="salesData.salesGrowth >= 0 ? 'up' : 'down'">
            <i :class="salesData.salesGrowth >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'"></i>
            {{ Math.abs(salesData.salesGrowth) }}%
          </div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-file-invoice"></i>
        </div>
        <div class="stat-content">
          <div class="stat-title">订单数量</div>
          <div class="stat-value">{{ salesData.totalOrders.toLocaleString() }}</div>
          <div class="stat-change" :class="salesData.ordersGrowth >= 0 ? 'up' : 'down'">
            <i :class="salesData.ordersGrowth >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'"></i>
            {{ Math.abs(salesData.ordersGrowth) }}%
          </div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-box"></i>
        </div>
        <div class="stat-content">
          <div class="stat-title">平均客单价</div>
          <div class="stat-value">¥{{ salesData.averageOrderValue.toLocaleString() }}</div>
          <div class="stat-change" :class="salesData.aovGrowth >= 0 ? 'up' : 'down'">
            <i :class="salesData.aovGrowth >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'"></i>
            {{ Math.abs(salesData.aovGrowth) }}%
          </div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-users"></i>
        </div>
        <div class="stat-content">
          <div class="stat-title">活跃分销商</div>
          <div class="stat-value">{{ salesData.activeDistributors }}</div>
          <div class="stat-change" :class="salesData.distributorsGrowth >= 0 ? 'up' : 'down'">
            <i :class="salesData.distributorsGrowth >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'"></i>
            {{ Math.abs(salesData.distributorsGrowth) }}%
          </div>
        </div>
      </div>
    </div>
    
    <div class="chart-row">
      <div class="chart-card large">
        <div class="chart-header">
          <h3>销售趋势</h3>
          <div class="chart-actions">
            <select v-model="trendPeriod" class="period-select">
              <option value="day">按日</option>
              <option value="week">按周</option>
              <option value="month">按月</option>
            </select>
            <button class="chart-action-btn">
              <i class="fas fa-download"></i>
            </button>
          </div>
        </div>
        <div class="chart-content">
          <!-- 销售趋势图表 -->
          <div class="chart-placeholder">
            <div class="trend-chart-container">
              <!-- 这里会渲染销售趋势图 -->
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="chart-row">
      <div class="chart-card">
        <div class="chart-header">
          <h3>销售分布</h3>
          <div class="chart-actions">
            <select v-model="distributionType" class="type-select">
              <option value="category">按产品类别</option>
              <option value="region">按地区</option>
              <option value="channel">按渠道</option>
            </select>
            <button class="chart-action-btn">
              <i class="fas fa-download"></i>
            </button>
          </div>
        </div>
        <div class="chart-content">
          <!-- 销售分布图表 -->
          <div class="chart-placeholder">
            <div class="distribution-chart-container">
              <!-- 这里会渲染销售分布图 -->
            </div>
          </div>
        </div>
      </div>
      
      <div class="chart-card">
        <div class="chart-header">
          <h3>热门产品排行</h3>
          <div class="chart-actions">
            <button class="chart-action-btn">
              <i class="fas fa-download"></i>
            </button>
          </div>
        </div>
        <div class="chart-content">
          <div class="popular-products">
            <div v-for="(product, index) in popularProducts" :key="product.id" class="product-item">
              <div class="product-rank">{{ index + 1 }}</div>
              <div class="product-image">
                <img :src="product.image" :alt="product.name">
              </div>
              <div class="product-info">
                <div class="product-name">{{ product.name }}</div>
                <div class="product-stats">
                  <div class="product-sales">
                    <span class="label">销量:</span>
                    <span class="value">{{ product.sales }}件</span>
                  </div>
                  <div class="product-revenue">
                    <span class="label">收入:</span>
                    <span class="value">¥{{ product.revenue.toLocaleString() }}</span>
                  </div>
                </div>
              </div>
              <div class="product-growth" :class="product.growth >= 0 ? 'up' : 'down'">
                <i :class="product.growth >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'"></i>
                {{ Math.abs(product.growth) }}%
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="chart-row">
      <div class="chart-card conversion-card">
        <div class="chart-header">
          <h3>转化漏斗</h3>
          <div class="chart-actions">
            <button class="chart-action-btn">
              <i class="fas fa-download"></i>
            </button>
          </div>
        </div>
        <div class="chart-content">
          <!-- 转化漏斗图表 -->
          <div class="chart-placeholder">
            <div class="funnel-chart-container">
              <!-- 这里会渲染转化漏斗图 -->
            </div>
          </div>
        </div>
      </div>
      
      <div class="chart-card distributor-card">
        <div class="chart-header">
          <h3>分销商销售排行</h3>
          <div class="chart-actions">
            <button class="chart-action-btn">
              <i class="fas fa-download"></i>
            </button>
          </div>
        </div>
        <div class="chart-content">
          <div class="distributor-list">
            <div v-for="(distributor, index) in topDistributors" :key="distributor.id" class="distributor-item">
              <div class="distributor-rank">{{ index + 1 }}</div>
              <div class="distributor-avatar">
                <img :src="distributor.avatar" :alt="distributor.name">
              </div>
              <div class="distributor-info">
                <div class="distributor-name">{{ distributor.name }}</div>
                <div class="distributor-sales">
                  <span class="label">销售额:</span>
                  <span class="value">¥{{ distributor.sales.toLocaleString() }}</span>
                </div>
              </div>
              <div class="distributor-growth" :class="distributor.growth >= 0 ? 'up' : 'down'">
                <i :class="distributor.growth >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'"></i>
                {{ Math.abs(distributor.growth) }}%
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 导入模拟数据生成函数
import agentMock from '@/utils/agentMock';

// 状态变量
const trendPeriod = ref('day');
const distributionType = ref('category');

// 获取模拟数据
const salesData = ref({
  totalSales: 0,
  totalOrders: 0, 
  averageOrderValue: 0,
  activeDistributors: 0,
  salesGrowth: 0,
  ordersGrowth: 0,
  aovGrowth: 0,
  distributorsGrowth: 0
});

const popularProducts = ref([]);
const topDistributors = ref([]);

// 加载销售分析数据
const loadSalesAnalyticsData = () => {
  // 这里将来会调用实际API，现在使用模拟数据
  const dashboardData = agentMock.generateDashboardOverviewData();
  const trendData = agentMock.generateSalesTrendData(30);
  
  // 设置概览数据
  salesData.value = {
    totalSales: dashboardData.totalSales,
    totalOrders: dashboardData.totalOrders,
    averageOrderValue: Math.round(dashboardData.totalSales / dashboardData.totalOrders),
    activeDistributors: dashboardData.distributorsCount,
    salesGrowth: dashboardData.growthRates.salesGrowth,
    ordersGrowth: dashboardData.growthRates.ordersGrowth,
    aovGrowth: dashboardData.growthRates.salesGrowth - dashboardData.growthRates.ordersGrowth,
    distributorsGrowth: dashboardData.growthRates.distributorsGrowth
  };
  
  // 获取热门产品
  const topProducts = agentMock.generateDashboard().topProducts.map(product => ({
    ...product,
    growth: Math.floor(Math.random() * 41) - 20 // 随机增长率 -20% 到 20%
  }));
  popularProducts.value = topProducts;
  
  // 获取顶级分销商
  const statData = agentMock.generateStatistics();
  topDistributors.value = statData.distributorPerformance.slice(0, 5).map(distributor => ({
    ...distributor,
    growth: Math.floor(Math.random() * 41) - 20 // 随机增长率 -20% 到 20%
  }));
};

// 组件挂载时加载数据
onMounted(() => {
  loadSalesAnalyticsData();
});
</script>

<style scoped>
.sales-analytics {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filter-controls {
  display: flex;
  gap: 20px;
  align-items: center;
}

.filter-buttons {
  display: flex;
  gap: 10px;
}

.filter-btn {
  padding: 8px 16px;
  border: 1px solid #e5e7eb;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #4b5563;
  transition: all 0.2s;
}

.filter-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}

.filter-btn.active {
  background-color: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.custom-date {
  display: flex;
  align-items: center;
}

.date-input {
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  width: 130px;
}

.date-separator {
  margin: 0 10px;
  color: #6b7280;
}

.apply-btn {
  padding: 8px 16px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}

/* 概览卡片 */
.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: flex-start;
}

.stat-icon {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 20px;
  margin-right: 15px;
}

.stat-content {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8px;
}

.stat-change {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.stat-change.up {
  color: #10b981;
}

.stat-change.down {
  color: #ef4444;
}

/* 图表布局 */
.chart-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.chart-card.large {
  grid-column: 1 / -1;
}

.chart-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.chart-action-btn {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-action-btn:hover {
  color: #3b82f6;
}

.period-select, .type-select {
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 14px;
  color: #4b5563;
}

.chart-content {
  padding: 20px;
  min-height: 300px;
}

/* 图表占位符 */
.chart-placeholder {
  width: 100%;
  height: 250px;
  background-color: #f9fafb;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}

/* 热门产品列表 */
.popular-products {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.product-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.product-item:hover {
  background-color: #f9fafb;
}

.product-rank {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3b82f6;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  margin-right: 15px;
}

.product-image {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 15px;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  flex: 1;
}

.product-name {
  font-weight: 500;
  margin-bottom: 5px;
}

.product-stats {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #6b7280;
}

.product-growth, .distributor-growth {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.product-growth.up, .distributor-growth.up {
  color: #10b981;
}

.product-growth.down, .distributor-growth.down {
  color: #ef4444;
}

/* 分销商列表 */
.distributor-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.distributor-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.distributor-item:hover {
  background-color: #f9fafb;
}

.distributor-rank {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3b82f6;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  margin-right: 15px;
}

.distributor-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}

.distributor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.distributor-info {
  flex: 1;
}

.distributor-name {
  font-weight: 500;
  margin-bottom: 5px;
}

.distributor-sales {
  font-size: 12px;
  color: #6b7280;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .filter-controls {
    flex-direction: column;
    width: 100%;
  }
  
  .chart-row {
    grid-template-columns: 1fr;
  }
}
</style> 